<!-- v-if 、v-else 和 v-show -->
 <!-- v-if="逻辑表达式/布尔值" -->
<template>
    <!-- 控制盒子是否显示 -->
    <p>是否显示：{{ visible }}</p>

    <div v-show="visible" class="red"></div>
    <p></p>

    <div v-if="visible" class="blue"></div>
    <div v-else class="green"></div>
    <p></p>
    <hr>
    <!-- 模拟登录 -->
     <div>
        <p v-if="isLoad">欢迎XXX登录</p>
        <p v-else>退出登录，欢迎下次再来</p>
     </div>
     <hr>
     
     <!-- v-if 、v-else 和v-else-if -->
      <p v-if="mark>=80"> 成绩优秀 </p>
      <p v-else-if="mark>=60">成绩良好</p>
      <p v-else>成绩不及格</p>
</template>

<script setup>
import { ref } from 'vue';
    const visible = ref(false)

    const isLoad = ref(true)

    const mark = ref(84)
</script>

<style>
    .red, .green, .blue{
        width: 200px;
        height: 200px;
    }
    .red{
        background: red;
    }
    .blue{
        background: blue;
    }
    .green{
        background: green;
    }
</style>